<template lang="">
  <div class="All">
    <!-- 切换项目 -->
    <div class="tabs">
      <router-link to="/board/Current">
        <button class="tabs-button">当前项目</button>
      </router-link>

      <router-link to="/board/allproject">
        <button class="active">全部项目</button>
      </router-link>

      <router-link to="/board/unpublished">
        <button class="tabs-button">未发布项目</button>
      </router-link>
    </div>
    <div class="search">
      <div style="display: flex">
        <div class="Filter-item">项目编号</div>
        <t-input style="width: 180px" v-model="cx.id"/>
      </div>
      <div style="display: flex">
        <div class="Filter-item">项目名称</div>
        <t-input style="width: 180px" v-model="cx.title"/>
      </div>

      <div style="display: flex">
        <div class="Filter-item">项目状态</div>
        <t-select style="width: 180px" v-model="cx.stais">
          <t-option key="quanbu" label="全部" value="" />
          <t-option key="apple" label="已结束" value="2" />
          <t-option key="orange" label="未开始" value="0" />
          <t-option key="banana" label="进行中" value="1" />
        </t-select>
      </div>
      <div style="display: flex">
        <div class="Filter-item">开始时间</div>
        <t-date-picker style="width: 180px" allowInput clearable  v-model="cx.time"/>
      </div>

      <div class="inquire">
        <t-button  theme="primary" class="button-inquire" @click="refer()" style="background-color: rgb(59, 182, 254);">确认查询</t-button>
        <router-link to="/evaluating/square">
          <img
            style="width: 35px"
            src="../../static/images/board/jia.png"
            alt=""
          />
        </router-link>

        <img
          style="width: 35px"
          src="../../static/images/board/daochu.png"
          alt=""
        />
      </div>
    </div>
    <t-table
      row-key="index"
      :data="dataarr"
      :columns="columns1"
      :stripe="stripe"
      :bordered="bordered"
      :hover="hover"
      :table-layout="tableLayout ? 'auto' : 'fixed'"
      :size="size"
      :pagination="pagination1"
      :show-header="showHeader"
      cell-empty-content="-"
      resizable
      @row-click="handleRowClick"
      stripe
    >
      <template #operation="{ row }">
        <t-link theme="primary" hover="color" @click="rehandleClickOp(row)">
          编辑
        </t-link>
        <t-link theme="primary" hover="color" @click="rehandleClickdl(row)">
          删除
        </t-link>
      </template>
    </t-table>
    <!-- 删除弹出框 -->
    <t-dialog
      v-model:visible="visible"
      theme="info"
      header="确认删除"
      body="确认删除此项目吗？"
      attach="body"
      :confirm-on-enter="false"
      :on-cancel="onCancel"
      :on-confirm="onConfirmAnother"
    />
  </div>
  <!-- 编辑弹出框 -->
  <t-dialog
    :width="1000"
    header="创建项目"
    :visible.sync="addProjectModalvisible"
    :cancelBtn="null"
    :onCloseBtnClick="handleCloseAddProjectModal"
    :confirmBtn="true"
  >
    <div class="content-container">
      <div class="step-container">
        <t-steps
          :readonly="true"
          :current="formStep"
          :onChange="handleStepChange"
        >
          <t-step-item title="第一步:项目信息" :value="1" />
          <t-step-item title="第二步:适用范围" :value="2" />
          <t-step-item title="第三步:关联服务" :value="3" />
          <t-step-item title="第四步:发布设置" :value="4" />
        </t-steps>
      </div>
      <div class="form-container">
        <div>
          <t-form v-show="formStep === 1">
            <t-form-item label="项目名称" name="name" initialData="TDesign">
              <t-input placeholder="请输入项目名称" v-model="datainput.title" />
            </t-form-item>
            <t-form-item label="项目简介" name="description">
              <t-textarea
                v-model="datainput.comment"
                placeholder="请输入项目简介"
              ></t-textarea>
            </t-form-item>
            <t-form-item label="项目详情" name="description">
              <t-textarea
                v-model="datainput.intro"
                placeholder="请输入项目详情"
              ></t-textarea>
            </t-form-item>
            <t-form-item label="封面图" name="avatar">
              <t-upload
                action="/dc/file/upload"
                v-model="logo"
                :headers="header"
                theme="image"
                tips="请选择单张图片文件上传"
                accept="image/*"
              ></t-upload>
            </t-form-item>
          </t-form>

          <t-form v-show="formStep === 2">
              <t-form-item label="参与人员" name="course" initialData="['1']">
                  <t-radio-group v-model="datainput.zzjg" @Change="radio1">
                    <t-radio value="1">按员工</t-radio>
                    <t-radio value="2">按组织</t-radio>
                  </t-radio-group>
                </t-form-item>
                <t-form-item label="组织架构" name="parentOrgName" v-if="zzhsyg">
                  <t-cascader
                    v-model="formData.parentOrgName"
                    :options="zjlist"
                    clearable
                    @change="onChange1"
                  />
                </t-form-item>
                <t-form-item label="选择员工" name="college"  v-if="!zzhsyg">
                  <t-select
                    @focus="handleEmployeeSelectFocus"
                    v-model="formData.college"
                    class="demo-select-base"
                    clearable
                    filterable
                    placeholder="请选择员工"
                  >
                    <t-option
                      v-for="(item, index) in options"
                      :value="item.value"
                      :label="item.label"
                      :key="index"
                    >
                      {{ item.label }}
                    </t-option>
                  </t-select>
                </t-form-item>

            <div style="margin-bottom: 10px" v-if="tableVisible">
              总共选择{{ data.length }}名员工
            </div>
            <t-table
              :title="选择员工"
              :pagination="selectedTablePagination"
              rowKey="index"
              :data="data"
              :footData="[{}]"
              :columns="columns"
              bordered
            >
              <template #operation="{ row }">
                <t-link theme="primary" hover="color" @click="delt(row)">
                  删除
                </t-link>
              </template>
            </t-table>

            <t-dialog
              :visible.sync="employeeDialogVisible"
              width="1050"
              header="选择员工"
              :onConfirm="handleConfirmEmployessDialog"
              :cancelBtn="null"
              :onCloseBtnClick="handleCloseEmployeeDialog"
            >
              <div class="top_box">
                <t-form>
                  <t-form-item
                    label="员工姓名"
                    name="name"
                    initialData="TDesign"
                  >
                    <t-input placeholder="请输入内容" />
                  </t-form-item>
                  <t-form-item
                    label="员工编号"
                    name="name"
                    initialData="TDesign"
                  >
                    <t-input placeholder="请输入内容" />
                  </t-form-item>
                  <t-form-item
                    label="手机号码"
                    name="name"
                    initialData="TDesign"
                  >
                    <t-input placeholder="请输入内容" />
                  </t-form-item>
                  <t-form-item
                    label="按项目选择"
                    name="name"
                    initialData="TDesign"
                  >
                    <t-input placeholder="请输入内容" />
                  </t-form-item>
                  <t-form-item
                    label="良性筛出"
                    name="name"
                    initialData="TDesign"
                  >
                    <t-input placeholder="请输入内容" />
                  </t-form-item>
                  <t-form-item
                    label="组织架构"
                    name="name"
                    initialData="TDesign"
                  >
                    <t-input placeholder="请输入内容">
                      <t-input
                        type="password"
                        v-model="formData.password"
                        placeholder="请输入密码"
                      ></t-input>
                    </t-input>
                  </t-form-item>
                  <t-button
                    theme="primary"
                    class="btn"
                    type="submit"
                    style="background-color: rgb(59, 182, 254); border: 0"
                    >查询</t-button
                  >
                  <t-button
                    theme="default"
                    class="btn"
                    variant="base"
                    type="reset"
                    style="
                      color: rgb(59, 182, 254);
                      border: 1px solid rgb(59, 182, 254);
                      background-color: #fff;
                    "
                    >重置</t-button
                  >
                </t-form>
              </div>
              <t-table
                :pagination="pagination"
                rowKey="index"
                :data="employeeData"
                :footData="[{}]"
                :columns="employeeColumns"
                :selected-row-keys="selectedRowKeys"
                @select-change="rehandleSelectChange"
                bordered
              >
                <template #operation="{ row }">
                  <t-link theme="primary" hover="color"> 查看 </t-link>
                </template>
              </t-table>
            </t-dialog>
          </t-form>

          <t-form v-show="formStep === 3">
            <t-form-item label="选择服务" name="course" initialData="['1']">
              <t-checkbox :checked="chena" @change="chena = !chena"
                >开启服务</t-checkbox
              >
            </t-form-item>
            <t-form-item label="测评服务" name="college">
              <t-select
                v-model="datainput.lb_ids"
                class="demo-select-base"
                clearable
                filterable
                :min-collapsed-num="2"
                multiple
                placeholder="请选择测评服务"
                 :disabled="!chena"
              >
                <t-option
                  v-for="(item, index) in cpdata"
                  :value="item.id"
                  :label="item.name"
                  :key="index"
                >
                  {{ item.name }}
                </t-option>
              </t-select> </t-form-item
            ><t-form-item label="课程服务" name="college">
              <t-select
                v-model="datainput.lblession_ids"
                class="demo-select-base"
                clearable
                filterable
                multiple
                :min-collapsed-num="2"
                placeholder="请选择课程服务"
                 :disabled="!chena"
              >
                <t-option
                  v-for="(item, index) in kcdata"
                  :value="item.les_id"
                  :label="item.les_name"
                  :key="index"
                >
                  {{ item.les_name }}
                </t-option>
              </t-select> </t-form-item
            ><t-form-item label="咨询服务" name="college">
              <t-select
                v-model="formData.college"
                class="demo-select-base"
                clearable
                multiple
                filterable
                :min-collapsed-num="2"
                placeholder="请选择咨询服务"
                 :disabled="!chena"
              >
                <t-option
                  v-for="(item, index) in options"
                  :value="item.value"
                  :label="item.label"
                  :key="index"
                >
                  {{ item.label }}
                </t-option>
              </t-select>
            </t-form-item>
            <t-form-item name="course" initialData="['1']">
              <t-image
                src="https://tdesign.gtimg.com/demo/demo-image-1.png"
                fit="cover"
                :style="{ width: '120px', height: '120px' }"
              />
            </t-form-item>
          </t-form>

          <t-form v-show="formStep === 4">
            <t-form-item label="项目期限" name="name" initialData="TDesign">
              <t-date-range-picker v-model="riqi" />
            </t-form-item>
            <t-form-item label="项目链接" name="tel" initialData="123456">
              <t-input-adornment prepend="手机版">
                <t-input placeholder="https://dc.eapchina.net.cn/" />
              </t-input-adornment>
            </t-form-item>
            <t-form-item label="项目地址" name="tel" initialData="123456">
              <t-input-adornment prepend="手机版">
                <t-input placeholder="https://dc.eapchina.net.cn/" />
              </t-input-adornment>
            </t-form-item>
            <t-form-item label="二维码" name="course" initialData="['1']">
              <!-- <t-image
                src="https://tdesign.gtimg.com/demo/demo-image-1.png"
                fit="cover"
                :style="{ width: '120px', height: '120px' }"
              /> -->
                   <div
                    class="qrcode"
                    ref="qrCodeUrl"
                    :style="{ width: '120px', height: '120px' }"
                  ></div>
            </t-form-item>
          </t-form>
        </div>
      </div>
      <div class="step-form-action">
        <t-button @click="handleStepBack" v-if="formStep !== 1"
          >上一步</t-button
        >
        <t-button @click="handleStepGo" v-if="formStep !== 4">下一步</t-button>
        <t-button @click="handleStepFormConfirm" v-if="formStep === 4"
          >确认修改</t-button
        >
      </div>
    </div>
  </t-dialog>
</template>
<script lang="jsx">
import { MessagePlugin } from "tdesign-vue-next";
import axios from "axios";
import QRCode from "qrcodejs2-fix";
import { getToken } from "../../utils/setToken";
import {
  zcvotelogList,
  assessList,
  lessionRecommend,
  assessRecommend,
  selectZdmember,
  createAssess
} from "../../api/square.js";
import { deleteZcvote,viewBack,update } from "../../api/allproject.js";
export default {
data() {
  return {
    zzhsyg:false,
    statusNameListMap : {
  0: { label: "未开始", theme: "warning" },
  1: { label: "进行中", theme: "success" },
  2: { label: "已结束", theme: "danger" },
},
cx:{
  id:"",
  title:"",
  stais:"",
  time:"",
},
    addProjectModalvisible: false,
      formStep: 1,
      formData: {},
      cpdata: [],
      kcdata: [],
      tableVisible: false,
      employeeDialogVisible: false,
      selectedRowKeys: [],
      riqi:[],
      logo:[],
      chena:true,
      header:{token:getToken('token')},
 dataarr :[],
  bordered :true,
  hover : false,
   tableLayout : false,
 size : "medium",
 showHeader : true,
 visible : false,
 iintem :'0',
 dialogvisible : false,
  datainput: {
        comment: "",
        endtime: "",
        id: "",
        intro: "",
        is_recommend_consultantL: "",
        lb_ids: [],
        lblession_ids: [],
        limit_time: "",
        logo: [],
        starttime: "",
        status: "",
        title: "",
        zcvoteId: "",
        zdIdList: [],
      },
columns1 :[
  { colKey: "index", title: "序号", width: "70", align: "center" },
  { colKey: "Title", title: "项目名称", width: "140", align: "center" },
  { colKey: "ID", title: "项目编号", width: "80", align: "center" },
  {
    colKey: "status",
    title: "项目状态",
    width: "80",
    align: "center",
    cell: (h, { row }) => {
      return (
        <t-tag
          shape="round"
          theme={this.statusNameListMap[row.status].theme}
          variant="light-outline"
        >
          {this.statusNameListMap[row.status].icon}
          {this.statusNameListMap[row.status].label}
        </t-tag>
      );
    },
  },
  { colKey: "StartTime", title: "开始时间", width: "130", align: "center" },

  {
    colKey: "EndTime",
    title: "结束时间",
    ellipsis: true,
    width: "130",
    align: "center",
  },
  // { colKey: "participation", title: "参与人数", width: "80", align: "center" },
  // { colKey: "accomplish", title: "完成人数", width: "80", align: "center" },
  // { colKey: "prescribe", title: "限定人数", width: "80", align: "center" },
  // { colKey: "sun", title: "阳性晒出", width: "80", align: "center" },
  // { colKey: "createTime", title: "创建时间", width: "80", align: "center" },
  // {
  //   title: "项目报告",
  //   colKey: "link",
  //   // 超出省略的内容显示纯文本，不带任何样式和元素
  //   ellipsis: (h, { row }) => row.link,
  //   // 注意这种 JSX 写法需设置 <script lang="jsx" setup>
  //   cell: (h, { row }) => (
  //     <a
  //       href="/vue-next/components/table"
  //       style="color:rgb(117,177,247); text-decoration: none;"
  //     >
  //       {row.link}
  //     </a>
  //   ),
  //   width: "80",
  //   align: "center",
  // },
  {
    colKey: "operation",
    title: "操作",
    width: 150,
    foot: "-",
    align: "center",
  },
],
pagination1:{
  defaultCurrent: 1,
  defaultPageSize: 10,
  total: 1,
},
   data: [],
   employeeData: [
      ],

      employeeColumns: [
        {
          colKey: "row-select",
          type: "multiple",
          width: "100",
        },
        { colKey: "name", title: "姓名", width: "100" },
        { colKey: "mobile", title: "手机号码", width: "100" },
        { colKey: "prop15", title: "所属组织", width: "100" },
        { colKey: "zc", title: "阳性筛出", width: "100" },
        {
          colKey: "operation",
          title: "曾参与项目",
          width: 150,
        },
      ],

      columns: [
        { colKey: "name", title: "姓名", width: "100" },
        { colKey: "prop15", title: "部门", width: "100" },
        // { colKey: "name", title: "编号", width: "100" },
        { colKey: "mobile", title: "手机号码", width: "100" },
        { colKey: "zc", title: "健康状态", width: "100" },
        {
          colKey: "operation",
          title: "操作",
          width: 150,
        },
      ],
      selectedTablePagination: {
        current: 1,
        pageSize: 5,
        showJumper: false,
        showPageNumber: true,
        showPageSize: false,
        totalContent: false,
        total: 2,
        showPreviousAndNextBtn: false,
        onChange: (pageInfo) => {
          this.pagination.current=pageInfo.current
          this.pagination.pageSize=pageInfo.pageSize
        },
      },
      pagination: {
        current: 1,
        pageSize: 5,
        total: 2,
        // defaultCurrent: 1,
        // defaultPageSize: 10,
        showJumper: false,
        onChange: (pageInfo) => {
          this.pagination.current=pageInfo.current
          this.pagination.pageSize=pageInfo.pageSize
        },
      },
  }
},
methods: {
    handleCloseAddProjectModal() {
      this.addProjectModalvisible = false;
    },
    handleStepChange(stepVal) {
      this.formStep = stepVal;
    },
    handleStepBack() {
      this.formStep = this.formStep - 1;
    },
    handleStepGo() {
      this.formStep = this.formStep + 1;
    },
     handleEmployeeSelectFocus() {
      this.employeeDialogVisible = true;
    },
    handleCloseEmployeeDialog() {
      this.employeeDialogVisible = false;
    },
    handleConfirmEmployessDialog() {
      this.employeeDialogVisible = false;
      this.tableVisible = true;
    },
     rehandleSelectChange(value, { selectedRowData }) {
      this.selectedRowKeys = value;
      this.data=selectedRowData
      console.log(this.selectedRowKeys,selectedRowData);
    },
      riqijs(){
  // 获取今天的时间
  const today = new Date();

  // 获取未来第30天的时间
  const futureDate = new Date();
  futureDate.setDate(today.getDate() - 90);

  // 将时间格式化为字符串
  const todayStr = today.toISOString().slice(0, 10);
  const futureDateStr = futureDate.toISOString().slice(0, 10);
  // 输出结果
 this.riqi= [futureDateStr, todayStr];
},
        //单选事件
    radio1(ev) {
      if (ev === "1") {
        //人员
       
        this.zzhsyg=false
      } else {
        //组织
        this.zzhsyg=true
        this.tableVisible = false;
      }
    },
    //查询
   async refer(){
    if(this.cx.time){this.cx.time=this.cx.time+' 00:00:00'}
        const res = await zcvotelogList({
     id:this.cx.id, 
     title:this.cx.title, 
     starttime:this.cx.time, 
     status:this.cx.stais,
  });
  res.data.forEach((item,i) => {
    item.index=i+1
  });
  this.dataarr=res.data
   this.pagination1.total = this.dataarr.length;
    },
  //删除
 rehandleClickdl  (e)  {
  this.visible = true;
  this.iintem = e.index-1;
},
//修改确认
async   handleStepFormConfirm(){
  // let res1= await getAllUserByOrg({orgId:this.paderid})
      // return
     if(this.chena){
      this.datainput.is_recommend_consultantL='0'
     }else{
       this.datainput.is_recommend_consultantL='1'
     }
      this.data.forEach(item => {
         this.datainput.zdIdList.push(item.id)
      });
      this.datainput.starttime=this.riqi[0]+' 00:00:00'
       this.datainput.endtime=this.riqi[1]+' 00:00:00'
      this.datainput.logo= this.logo[0].url
    console.log(this.datainput);
      const res =await update(this.datainput)
      console.log(res);
    if(res.code===0){
      this.addProjectModalvisible = false;
      MessagePlugin.success("修改成功");
       this.api()
    }
},
//修改
async rehandleClickOp  (e)  {
  this.addProjectModalvisible = true;
  this.formStep=1
   this.iintem = e.index-1;
   console.log(this.dataarr);
  const res =await viewBack({id:(this.dataarr[this.iintem].ID).toString()})
   this.logo=[]
  this.logo.push({ name: 'demo-image-1.png', url:res.data.logo  })
  this.datainput=res.data
  this.datainput.lb_ids=[]
  this.datainput.lblession_ids=[]
  const arr=[]
  res.data.zdIdList.forEach(ite=>{
  this.employeeData.forEach(item=>{
    if(item.id===ite){
      arr.push(item)
    }
  })
  this.data=arr
  })
},
 handleRowClick(e){
  // console.log(e);
},
//删除确认
async onConfirmAnother(context){
  const res=await deleteZcvote({id:this.dataarr[this.iintem].ID})
  console.log(res);
 this.visible = false;
  this.api()
},
//删除取消
 onCancel(context) {
  console.log("点击了取消按钮", context);
  this.visible = false;
},
async api(){
  const res = await zcvotelogList({
     id:this.cx.id, 
     title:this.cx.title, 
     starttime:this.cx.time, 
     status:this.cx.stais,
  });
  console.log(res);
  res.data.forEach((item,i) => {
    item.index=i+1
  });
  this.dataarr=res.data
   this.pagination1.total = this.dataarr.length;
   const res1 = await lessionRecommend();
      this.kcdata = res1.data;
      const res2 = await assessRecommend();
      this.cpdata = res2.data;
      const res3 = await selectZdmember({
        age: "",
        birthday: "",
        city: "",
        department: "",
        email: "",
        gender: "",
        id: "",
        isManager: "",
        memberno: "",
        mobile: "",
        name: "",
        password: "",
        prop15: "",
        regTime: "",
        snum: "",
        status: "",
        subCompany: "",
        unit_ID: "",
        userName: "",
      });
      console.log(res3);
      res3.data.forEach((item ,index)=> {
        item.index=index
        item.zc='正常'
      });
      this.employeeData=res3.data
        this.pagination.total=this.employeeData.length
},
  //二维码
    creatQrCode() {
      this.$nextTick(() => {
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
          text: "https://dc.eapchina.net.cn/", // 需要转换为二维码的内容
          width: 100,
          height: 100,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
      });
    },
},
created(){
 this.api();
 this.riqijs()
 this.creatQrCode()
}
}
</script>
<style lang="scss" scoped>
.All {
  background-color: rgb(241, 245, 248);
  height: 100%;
  padding: 15px 40px 0 40px;
  a {
    text-decoration: none;
  }

  a {
    font-size: 24px;
  }
  a:link {
    color: blue;
    text-decoration: none;
  }

  a:visited {
    color: #333;
    text-decoration: none;
  }

  .Filter-item {
    width: 70px;
    line-height: 30px;
  }
  // 当前项目
  .tabs {
    display: flex;
    gap: 32px;

    .tabs-button {
      width: 160px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      background-color: rgb(215, 217, 220);
      border-radius: 15px 15px 0 0;
      font-size: 18px;
      border: 0;
      color: #fff;
    }

    .active {
      width: 160px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      background-color: #fff;
      border-radius: 15px 15px 0 0;
      font-size: 20px;
      border: 0;
      color: #333;
    }

    .tabs-button:hover {
      background-color: #fff;
      color: #333;
      cursor: pointer;
    }
  }

  .search {
    background-color: #fff;
    display: flex;
    gap: 16px;
    padding: 32px;
    margin-bottom: 15px;
    flex-wrap: wrap;
  }
  .inquire {
    display: flex;
    gap: 10px;
    .button-inquire {
      width: 70px;
      height: 30px;
      // background-color: rgb(117, 177, 247);
      border: 0;
      color: #fff;
      line-height: 30px;
      border-radius: 10px;
    }
    .button-reset {
      width: 70px;
      height: 30px;
    }
  }
  .t-link {
    margin-right: 15px;
    color: rgb(59, 182, 254);
    font-size: 16px;
  }
  // :deep(th) {
  //   background-color: rgb(242, 242, 242);
  // }
  .t-select-input {
    display: none !important;
  }
}
.step-form-action {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.top_box {
  width: 100%;
  margin-top: 15px;
  // margin-left: 15px;
  border-radius: 15px;
  padding-bottom: 20px;
  padding-top: 20px;
  background-color: #fff;
  .t-form__item {
    display: inline-block;
  }
  .t-form__controls-content {
    width: 200px;
  }
  .btn {
    margin-left: 20px;
  }
  .tdesign-demo-dropdown {
    &__text {
      display: inline-flex;
      align-items: center;
      .t-icon {
        margin-left: 8px;
      }
    }
  }
}
</style>
